<template>  
  <view class="icon-container iconfont" @click="handleClick" :class="type">   
  </view>  
</template>  
  
<script setup>  
import { ref, onMounted, defineEmits } from 'vue'

const props = defineProps({
  type: {  	// 图标样式
    type: String,  
    required: true  
  },
  color: {
    type: String,
    default: '#000000'
  },
  size: {		// 单位rpx
    type: String,  
    default: "28rpx"
  }
})

const emits = defineEmits(['click'])

const iconSize = ref('')

const handleClick = () => {
  // 调用父组件传递的点击事件
  emits('click')
}
</script>  
  
<style scoped lang="scss">  
    @import "./iconfont/iconfont.css";
	.icon-container{
		display: inline-block;
	}
	.iconfont{
		color:v-bind(color);
		font-size:v-bind(size);
		width: v-bind(size);
		height: v-bind(size);
		line-height: v-bind(size);
		text-align: center;
		margin:0 auto;
	}
</style>